﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <ul>
        <li>qigndao</li>
        <li>beijing</li>
        <li>SHAGNHAI</li>
        <li>HongKong</li>
    </ul>
    <!-- 0.使用原生态的JS，会创建闭包。(需要了解函数的声明和函数的执行是在不同的执行期（一个是在预执行期，一个是在执行期），就能明白为什么会有这样的结果了。) -->
    <!--<script type="text/javascript">
        function badClosureExample() {
            var element = document.getElementsByTagName('li');
            for (var i = 0; i < element.length; i++) {
                element[i].onclick = function () {
                    alert("您单击的是第" + i + "个链接");
                }
            }
        }

        window.onload = function () {
            badClosureExample();
        }
    </script>-->

    <!--以下原生JS方法可以逃脱闭包(是因为此次是在执行badClosureExample时给属性赋值（立即执行的），onclick的时候调用这个属性)-->
    <script type="text/javascript">
        function badClosureExample() {
            var element = document.getElementsByTagName('li');
            for (var i = 0; i < element.length; i++) {
                element[i].temp = i;
                element[i].onclick = function () {
                    alert("您单击的是第" + this.temp + "个链接");
                }
            }
        }

        window.onload = function () {
            badClosureExample();
        }
    </script>

    <!--2.使用jQuery可以很好地逃脱闭包-->
    <!--
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("li").each(function (i) {
                $(this).click(function () {
                    alert(i);
                });
            })
        });
    </script>
    -->
</body>
</html>
